<template>
    {{ a }}
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="外协单位名称：" prop="outsourcingName">
      <el-input v-model="ruleForm.outsourcingName" placeholder="请输入外协单位名称" />
    </el-form-item>
    <el-form-item label="手机号：" prop="outsourcingPhone">
      <el-input v-model="ruleForm.outsourcingPhone" placeholder="请输入手机号" />
    </el-form-item>
    <el-form-item label="邮箱：" prop="outsourcingMailbox">
      <el-input v-model="ruleForm.outsourcingMailbox" placeholder="请输入邮箱地址" />
    </el-form-item>
    <el-form-item label="外协地址：" prop="outsourcingAddress">
      <el-input v-model="ruleForm.outsourcingAddress" placeholder="请输入外协地址" />
    </el-form-item>
    <el-form-item label="固定电话：" prop="outsourcingLandline">
      <el-input v-model="ruleForm.outsourcingLandline" placeholder="请输入固定电话" />
    </el-form-item>
    <el-form-item label="备注：" prop="outsourcingRemark">
      <el-input v-model="ruleForm.outsourcingRemark" type="textarea" placeholder="请输入备注信息"  />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang=ts>
import { useRoute } from 'vue-router'
const route = useRoute();
const a = route.query.outsourcingId
import { useRouter } from 'vue-router'
const router = useRouter();
import { reactive, ref,onMounted } from 'vue'
import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//生命周期函数钩
onMounted(function () {
    fantian();
})
//添加字段
const ruleForm = reactive({
    outsourcingName: "",
    outsourcingPhone: "",
    outsourcingMailbox: "",
    outsourcingAddress: "",
    outsourcingLandline: "",
    outsourcingRemark: "",
    outsourcingId: route.query.outsourcingId,
    createDate:""
})
//反填方法
const fantian = () => {
    axios.get("FoundationRead/api/OutSourcing/BackfillOutSourcing", {
        params: {
            outsourcingId:route.query.outsourcingId
        }
    })
        .then(res => {
            ruleForm.outsourcingName = res.data.data.outsourcingName;
            ruleForm.outsourcingPhone = res.data.data.outsourcingPhone;
            ruleForm.outsourcingMailbox = res.data.data.outsourcingMailbox;
            ruleForm.outsourcingAddress = res.data.data.outsourcingAddress;
            ruleForm.outsourcingLandline = res.data.data.outsourcingLandline;
            ruleForm.outsourcingRemark = res.data.data.outsourcingRemark;
            ruleForm.createDate = res.data.data.createDate;
            console.log(res.data.data)
    })
}
//修改方法
const submitForm = async (formEl: FormInstance | undefined) => {
    
  if (!formEl) return
    await formEl.validate((valid, fields) => {
    console.log(ruleForm)
      if (valid) {
        console.log(ruleForm)
        axios.post("FoundationWrite/api/OutSourcing/UpdateOutSourcing", ruleForm)
            .then(res => {
                if (res.data.data>0)
                {
                  ElMessage.success("外协单位修改成功")
                    router.push("/OutSourcingShow");
                }
                else
                {
                    ElMessage.error("外协单位修改失败")
                    return;
                }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>